<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>

<body>
  <video id="video" width="640" height="360" controls></video>

  <script>
    var video = document.getElementById('video');
    var videoUrl = 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/bda11534-a8e7-4366-a39a-a88c48817c27/default.jobtemplate.hls360.m3u8';
    // var videoUrl = 'https://vod3.cf.dmcdn.net/sec2(eCZ4WpOWEF3hXMj7d9TbcMeJalFkKEOYr9rQdHBUJrEcZSkqhoAdgeQj2WDgXpD6kezmjO0Eymj1K35fAPqy3JlhwUVATjDgN6wwDVz_uh-9TMdz-KUlc9l-Wrzr7aPi9V3DvYrAmfCG_M1LHzmT8-bhE0xLbGOB8HJ-sCZ-BOB03natGFqdSTrVpadXXu6Q)/video/029/186/556681920_mp4_h264_aac_hq_1.m3u8';
    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(videoUrl);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.muted = false;
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoUrl;
      video.addEventListener('loadedmetadata', function () {
        video.muted = false;
        video.play();
      });
    }
  </script>
</body>

</html>